import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid, Button, Icon, Dialog, Message } from '@alifd/next';
import { ApiOfPoolRemovePooledObjects } from '#/utils/agentApiDefine';
import moment from 'moment';

const { Row, Col } = Grid;

export default class BasicDetailInfo extends Component {
  static displayName = 'BasicDetailInfo';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  deleteConfirm = (type, label) => {
    let that = this;
    Dialog.confirm({
      title: '',
      content: '该操作一般是先暂停与本连接相关的采集任务！现在确认要从连接池中清除吗?',
      onOk: () => {
        ApiOfPoolRemovePooledObjects(that.props.formData.node, type, label).then(() => that.props.operationCallback('success'))
      }
    });
  }

  render() {
    let that = this;
    let formData = that.props.formData;
    let allObjects = formData.allObjects;
    let entries = Object.entries(allObjects).map((entry) => {
      let parsedValue = {};
      try {
        let connObj = JSON.parse(entry[0]);

        if(formData.name == 'SOCKET连接池') {
          parsedValue['type'] = 'socket'
          parsedValue['label'] = connObj['ipAddress'] + ':' + connObj['port']
        } else if(formData.name == 'SOCKET2连接池') {
          parsedValue['type'] = 'socket2'
          parsedValue['label'] = connObj['ipAddress'] + ':' + connObj['port']
        } else if(formData.name == 'SOCKET2连接池') {
          parsedValue['type'] = 'netty'
          parsedValue['label'] = connObj['ipAddress'] + ':' + connObj['port']
        } else if(formData.name == 'SNMP连接池') {
          parsedValue['type'] = 'snmp'
          parsedValue['label'] = connObj['ipAddress'] + ':' + connObj['port'] + ':' + connObj['community']
        } else if(formData.name == 'SERIAL连接池') {
          parsedValue['type'] = 'serial'
          parsedValue['label'] = connObj['comValue']
        } else if(formData.name == 'OPC连接池') {
          parsedValue['type'] = 'opc'
          parsedValue['label'] = connObj['host']
        }
        parsedValue['number'] = entry[1]
      } catch(e) {
        console.error(e);
      }
      return parsedValue;
    }).filter(x => x.number > 0)

    return (
      <IceContainer>
        <div style={styles.infoColumn}>
          <h5 style={styles.infoColumnTitle}>基本信息</h5>
          <Row wrap style={styles.infoItems}>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>连接池名称：</span>
              <span style={styles.infoItemValue}>{formData.name}</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>池内的最大连接容量：</span>
              <span style={styles.infoItemValue}>{formData.maxTotal} 个</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>单网关最大连接容量：</span>
              <span style={styles.infoItemValue}>{formData.maxTotalPerKey} 个</span>
            </Col>
          </Row>
        </div>
        <div style={styles.infoColumn}>
          <h5 style={styles.infoColumnTitle}>实时信息</h5>
          <Row wrap style={styles.infoItems}>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>创建或使用中的连接数量：</span>
              <span style={styles.infoItemValue}>{formData.numActive} 个</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>空闲连接数量：</span>
              <span style={styles.infoItemValue}>{formData.numIdle} 个</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>正在等待线程数量：</span>
              <span style={styles.infoItemValue}>{formData.numWaiters} 个</span>
            </Col>
            <Col xxs="24" l="24" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>池中所有连接：</span>
              <span style={styles.infoItemValue}>
                {
                  entries.map((entry, index) => {
                    return <p key={index} style={styles.inlineThreads}>
                      {entry.label + '(' + entry.number + ')'}
                      <Button onClick={() => this.deleteConfirm(entry.type, entry.label)} size="small" text style={{ color: 'red', marginLeft: '3px' }}><Icon type="close" /></Button>
                    </p>
                  })
                }
              </span>
            </Col>
          </Row>
        </div>
        <div style={styles.infoColumn}>
          <h5 style={styles.infoColumnTitle}>统计信息</h5>
          <Row wrap style={styles.infoItems}>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>平均等待时间：</span>
              <span style={styles.infoItemValue}>{moment.duration(formData.meanBorrowWaitTimeMillis).asSeconds()} 秒</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>最大等待时间：</span>
              <span style={styles.infoItemValue}>{moment.duration(formData.maxBorrowWaitTimeMillis).asSeconds()} 秒</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>创建连接次数：</span>
              <span style={styles.infoItemValue}>{formData.createdCount} 次</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>借出使用次数：</span>
              <span style={styles.infoItemValue}>{formData.borrowedCount} 次</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>使用完成归还次数：</span>
              <span style={styles.infoItemValue}>{formData.returnedCount} 次</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>空闲超时销毁次数：</span>
              <span style={styles.infoItemValue}>{formData.destroyedByEvictorCount} 次</span>
            </Col>
            <Col xxs="24" l="12" style={styles.infoItem}>
              <span style={styles.infoItemLabel}>验证无效销毁次数：</span>
              <span style={styles.infoItemValue}>{formData.destroyedByBorrowValidationCount} 次</span>
            </Col>
          </Row>
        </div>
      </IceContainer>
    );
  }
}

const styles = {
  basicDetailTitle: {
    margin: '10px 0',
    fontSize: '16px',
  },
  infoColumn: {
    marginLeft: '16px',
  },
  infoColumnTitle: {
    margin: '3px 0',
    paddingLeft: '10px',
    borderLeft: '3px solid #3080fe',
  },
  infoItems: {
    padding: 0,
    marginLeft: '25px',
  },
  infoItem: {
    marginBottom: '18px',
    listStyle: 'none',
    fontSize: '14px',
  },
  infoItemLabel: {
    minWidth: '70px',
    color: '#999',
  },
  infoItemValue: {
    color: '#333',
  },
  attachLabel: {
    minWidth: '70px',
    color: '#999',
    float: 'left',
  },
  attachPics: {
    width: '80px',
    height: '80px',
    border: '1px solid #eee',
    marginRight: '10px',
  },
  inlineThreads: {
    display: 'inline-block',
    margin: '0 20px 0 0',
  }
};
